import './editor.less';

import { Button, InputNumber, Switch, message } from 'antd';
import { LoadSource, WinLoad, bindSelf, util } from '../../../utils';
import React, { Component } from 'react';
import { SetGrid, SetItem } from '../../../../h5ds-components/item';

import { transaction } from 'mobx';

class Editor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      keys: util.randomID()
    };
    this.loadSource = new LoadSource();
  }

  @bindSelf
  changeDelay(val) {
    this.props.layer.data.delay = val;
    this.setState({ keys: util.randomID() });
  }

  @bindSelf
  autoPlayDo(val) {
    this.props.layer.data.autoplay = val;
    this.setState({ keys: util.randomID() });
  }

  // 是否开启icon
  @bindSelf
  changeMusicIcon(checked) {
    transaction(() => {
      if (checked) {
        this.props.layer.data.icon = 'default';
      } else {
        this.props.layer.data.icon = 'null';
      }
      this.props.h5ds.edata.keys = util.randomID();
      this.setState({ keys: util.randomID() });
      window.pubSubEditor.publish('h5ds.setHistory');
    });
  }

  // 循环播放
  @bindSelf
  changeMusicLoop(checked) {
    transaction(() => {
      this.props.layer.data.loop = checked;
      this.props.h5ds.edata.keys = util.randomID();
      this.setState({ keys: util.randomID() });
      window.pubSubEditor.publish('h5ds.setHistory');
    });
  }

  // 自动播放
  @bindSelf
  changeMusicAutoPlay(checked) {
    transaction(() => {
      this.props.layer.data.autoplay = checked;
      this.props.h5ds.edata.keys = util.randomID();
      this.setState({ keys: util.randomID() });
      window.pubSubEditor.publish('h5ds.setHistory');
    });
  }

  // 替换视频方法
  @bindSelf
  changeSound() {
    window.pubSubEditor.publish('h5ds.video.modal.show', {
      callback: data => {
        const { url, name } = data;
        const winload = new WinLoad();
        this.loadSource.videoLazy(url).then(audio => {
          winload.destroy();
          transaction(() => {
            this.props.layer.data.name = name;
            this.props.layer.data.sound = url;
            this.props.layer.data.duration = audio.duration;
            this.setState({ keys: util.randomID() });
            window.pubSubEditor.publish('h5ds.setHistory');
          });
        });
      }
    });
  }

  render() {
    this.state.keys;
    const { delay, autoplay, loop, name, sound } = this.props.layer.data;
    return (
      <div className="h5ds-ex-h5ds_sound">
        <SetGrid span={2}>
          <SetItem name="自动播放">
            <Switch checked={autoplay} onChange={this.changeMusicAutoPlay} />
          </SetItem>
        </SetGrid>
        <SetGrid span={2}>
          <SetItem name="循环播放">
            <Switch checked={loop} onChange={this.changeMusicLoop} />
          </SetItem>
        </SetGrid>
        <SetGrid span={2}>
          <SetItem name="延迟时间">
            <InputNumber step={0.1} min={0} value={delay} onChange={this.changeDelay} size="small" />
          </SetItem>
        </SetGrid>
        <SetGrid span={2}>
        </SetGrid>
        <SetItem name="当前视频">
          <span className="h5ds-ex-h5ds_sound-name">{name}</span>
          <video className="h5ds-video-controls" key={sound} src={sound} controls>
          </video>
          <Button type="primary" onClick={this.changeSound}>
            替换视频
          </Button>
        </SetItem>
      </div>
    );
  }
}
/**
 * 图层对于JSON数据
 */
class LayerJSON {
  id = null;
  className = null;
  animate = [];
  data = {
    icon: 'default', // 默认icon：style1, style2 ... 或者是图片url
    name: '默认',
    autoplay: true, // 默认自动播放
    loop: false, // 循环播放
    controls: 'controls', // 循环播放
    delay: 0, // 声音开始时间
    duration: 5, // 持续播放时间，单位秒s
    time: 5, // 持续播放时间，单位秒s
    count: 1, // 持续播放时间，单位秒s
    sound: ''
  };
  style = {
    top: 100,
    left: 100,
    width: 200,
    height: 100,
    display: 'block'
  };
  estyle = {};
  events = [];
}

const icon = <i className="h5ds-ico h5ds-ico-yinle" />;

// 添加图片的业务
function addVideoLayer(elem, props) {
  const { h5ds } = props;
  const { pluginsKey } = props.scope;
  const data = h5ds.getJsonByPid(pluginsKey, 'h5ds_video');
  const winload = new WinLoad();
  new LoadSource().videoLazy(elem.url).then(video => {
    winload.destroy();

    console.log('添加Video 02-addVideoLayer', video)
    if (video) {
      transaction(() => {
        // 设置初始位置
        let { top, left } = $('.h5ds-canvas-realsize').position();
        top = -top / h5ds.edata.phoneScale;
        left = -left / h5ds.edata.phoneScale;
        if (top < 0) {
          top = 0;
        }
        if (left < 0) {
          left = 0;
        }

        data.data.name = elem.name;
        data.data.sound = elem.url;
        data.data.duration = video.duration;
        data.data.time = video.duration;
        data.data.count = 1;
        data.style.top = top + 20;
        data.style.left = left + 20;

        // 添加动画，默认的动画  动画时间小于video长度时，追究弹走动画隐藏video
        // { name: '快闪', type: 'in', animate: 'fastShow', time: '0.1s', delay: '0s', count: 1, fun: 'linear' }
        // { name: '弹走', type: 'out', animate: 'bounceOut', time: '1s', delay: '0s', count: 1, fun: 'ease' },
        const defaultAnimate = {
          animate: 'fastShow',
          name: '视频裁剪',
          type: 'in',
          time: parseFloat(video.duration),
          delay: 0,
          count: 1,
          fun: 'linear'
        };
        const defaultAnimateEnd = {
          animate: 'bounceOut',
          name: '视频裁剪',
          type: 'out',
          time: 0.1,
          delay: parseFloat(video.duration),
          count: 1,
          fun: 'ease'
        };
        data.animate.push({
          name: defaultAnimate.name,
          type: defaultAnimate.type,
          style: `${defaultAnimate.animate} ${defaultAnimate.time}s ${defaultAnimate.fun} ${defaultAnimate.delay}s ${defaultAnimate.count} normal forwards running`
        });
        data.animate.push({
          name: defaultAnimateEnd.name,
          type: defaultAnimateEnd.type,
          style: `${defaultAnimateEnd.animate} ${defaultAnimateEnd.time}s ${defaultAnimateEnd.fun} ${defaultAnimateEnd.delay}s ${defaultAnimateEnd.count} normal forwards running`
        });

        h5ds.addLayer(data);
        h5ds.edata.keys = util.randomID();
        h5ds.setLayer(0);
        window.pubSubEditor.publish('h5ds.setHistory');
      });
    } else {
      message.error('加载失败！');
    }
  });
}

// 点击按钮，触发弹窗，传入一个callback函数，这个函数会在Modal内部触发
function selectIcon(props) {
  console.log('添加Video', props)
  // 添加视频
  window.pubSubEditor.publish('h5ds.video.modal.show', {
    callback: elem => {
      addVideoLayer(elem, props);
    }
  });
}

export { Editor, LayerJSON, icon, selectIcon };
